// SVG Finder Extension - Result Page Script
// 这个脚本处理结果页面的逻辑

// 存储当前的 SVG 数据
let currentSVGData = null;

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('Result page loaded');

    // 监听来自 background script 的消息
    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
        console.log('收到来自 background 的消息：', message);

        if (message.error) {
            showError(message.data);
        } else {
            showSVGData(message);
        }

        sendResponse({ received: true });
    });
});

// 显示错误信息
function showError(errorData) {
    const loadingDiv = document.getElementById('loading');
    const errorDiv = document.getElementById('error');
    const errorMessage = document.getElementById('error-message');

    if (loadingDiv) loadingDiv.style.display = 'none';
    if (errorDiv) errorDiv.style.display = 'block';
    if (errorMessage) errorMessage.textContent = errorData.error || '未知错误';
}

// 显示 SVG 数据
function showSVGData(message) {
    const loadingDiv = document.getElementById('loading');
    const contentDiv = document.getElementById('content');

    if (loadingDiv) loadingDiv.style.display = 'none';
    if (contentDiv) contentDiv.style.display = 'block';

    // 存储数据
    currentSVGData = message.data;

    // 更新页面信息
    updatePageInfo(message);

    // 更新统计信息
    updateStats(message.data);

    // 渲染 SVG 卡片
    renderSVGCards(message.data.svgs);

    // 绑定事件处理器
    bindEventHandlers(message.data.svgs);
}

// 更新页面信息
function updatePageInfo(message) {
    const pageTitle = document.getElementById('page-title');
    const pageUrl = document.getElementById('page-url');
    const scrapeTime = document.getElementById('scrape-time');

    console.log('更新页面信息：', message);
    console.log('接收到的 URL:', message.url);
    console.log('page-url 元素是否存在：', pageUrl !== null);

    if (pageTitle) {
        pageTitle.textContent = message.title || '未知页面';
        console.log('页面标题已设置：', pageTitle.textContent);
    }

    if (pageUrl) {
        const urlText = message.url || '未知 URL';
        pageUrl.textContent = urlText;
        console.log('页面 URL 已设置：', urlText);

        // 添加链接功能
        pageUrl.style.color = '#667eea';
        pageUrl.style.cursor = 'pointer';
        pageUrl.onclick = () => {
            console.log('点击 URL 链接：', message.url);
            if (message.url) {
                window.open(message.url, '_blank');
            }
        };
    } else {
        console.error('page-url 元素不存在！');
    }

    if (scrapeTime && message.data && message.data.pageInfo) {
        const timeText = new Date(message.data.pageInfo.timestamp).toLocaleString();
        scrapeTime.textContent = timeText;
        console.log('查找时间已设置：', timeText);
    }
}

// 更新统计信息
function updateStats(data) {
    const totalSvgs = document.getElementById('total-svgs');
    const totalSize = document.getElementById('total-size');
    const avgSize = document.getElementById('avg-size');

    if (totalSvgs) totalSvgs.textContent = data.count;

    if (data.svgs && data.svgs.length > 0) {
        const totalSizeBytes = data.svgs.reduce((sum, svg) => sum + (svg.downloadData.size || 0), 0);
        const totalSizeKB = (totalSizeBytes / 1024).toFixed(2);
        const avgSizeKB = (totalSizeKB / data.svgs.length).toFixed(2);

        if (totalSize) totalSize.textContent = totalSizeKB;
        if (avgSize) avgSize.textContent = avgSizeKB;
    }
}

// 渲染 SVG 卡片
function renderSVGCards(svgs) {
    const svgGrid = document.getElementById('svg-grid');
    if (!svgGrid) return;

    svgGrid.innerHTML = '';

    svgs.forEach((svg, index) => {
        const card = createSVGCard(svg, index);
        svgGrid.appendChild(card);
    });
}

// 创建 SVG 卡片
function createSVGCard(svg, index) {
    const card = document.createElement('div');
    card.className = 'svg-card';
    card.dataset.index = index;

    const sizeKB = (svg.downloadData.size / 1024).toFixed(2);

    card.innerHTML = `
        <div class="svg-preview">
            ${svg.outerHTML}
        </div>
        <div class="svg-info">
            <h3>${svg.id}</h3>
            <div class="svg-details">
                <div class="detail-item">
                    <span class="detail-label">大小:</span>
                    <span>${sizeKB} KB</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">元素数:</span>
                    <span>${svg.childElementsCount}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">路径:</span>
                    <span>${svg.pathCount}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">形状:</span>
                    <span>${svg.circleCount + svg.rectCount + svg.polygonCount}</span>
                </div>
            </div>
            <div class="svg-actions">
                <button class="btn btn-primary copy-btn" data-index="${index}">📋 复制</button>
            </div>
        </div>
    `;

    // 添加点击事件来选中/取消选中卡片
    card.addEventListener('click', (e) => {
        // 如果点击的是按钮，不触发选中
        if (e.target.tagName === 'BUTTON') return;

        card.classList.toggle('selected');
    });

    // 添加复制按钮事件监听器
    const copyBtn = card.querySelector('.copy-btn');
    if (copyBtn) {
        copyBtn.addEventListener('click', (e) => {
            e.stopPropagation(); // 阻止事件冒泡
            copyToClipboard(index);
        });
    }

    return card;
}

// 绑定事件处理器
function bindEventHandlers(svgs) {
    // 全选按钮
    const selectAllBtn = document.getElementById('select-all');
    if (selectAllBtn) {
        selectAllBtn.addEventListener('click', () => {
            const cards = document.querySelectorAll('.svg-card');
            cards.forEach(card => {
                card.classList.add('selected');
            });
        });
    }

    // 清除选择按钮
    const clearSelectionBtn = document.getElementById('clear-selection');
    if (clearSelectionBtn) {
        clearSelectionBtn.addEventListener('click', () => {
            const cards = document.querySelectorAll('.svg-card');
            cards.forEach(card => {
                card.classList.remove('selected');
            });
        });
    }
}

// 复制到剪贴板
function copyToClipboard(index) {
    if (!currentSVGData || !currentSVGData.svgs[index]) {
        console.error('无效的 SVG 索引：', index);
        showToast('❌ 无效的 SVG 索引');
        return;
    }

    const svg = currentSVGData.svgs[index];

    // 检查是否有有效的 SVG 代码
    if (!svg.outerHTML) {
        console.error('SVG 没有有效的代码');
        showToast('❌ SVG 没有有效的代码');
        return;
    }

    // 优先使用现代的 Clipboard API
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(svg.outerHTML).then(() => {
            console.log('✅ SVG 代码已复制到剪贴板');
            showToast('✅ SVG 代码已复制到剪贴板');
        }).catch(err => {
            console.error('❌ 复制失败，尝试备用方案：', err);
            fallbackCopyToClipboard(svg.outerHTML);
        });
    } else {
        // 使用备用方案
        fallbackCopyToClipboard(svg.outerHTML);
    }
}

// 备用复制方案
function fallbackCopyToClipboard(text) {
    try {
        // 创建临时文本区域
        const textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';
        textArea.style.left = '-999999px';
        textArea.style.top = '-999999px';
        document.body.appendChild(textArea);

        // 选择并复制
        textArea.focus();
        textArea.select();

        const successful = document.execCommand('copy');
        document.body.removeChild(textArea);

        if (successful) {
            console.log('✅ 使用备用方案复制成功');
            showToast('✅ SVG 代码已复制到剪贴板');
        } else {
            throw new Error('execCommand 复制失败');
        }
    } catch (error) {
        console.error('❌ 备用复制方案也失败：', error);
        showToast('❌ 复制失败，请手动选择并复制 SVG 代码');
    }
}

// 显示提示消息
function showToast(message) {
    // 创建提示元素
    const toast = document.createElement('div');
    toast.textContent = message;
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #333;
        color: white;
        padding: 12px 20px;
        border-radius: 6px;
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.3s ease;
    `;

    document.body.appendChild(toast);

    // 显示动画
    setTimeout(() => {
        toast.style.opacity = '1';
    }, 100);

    // 隐藏动画
    setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, 3000);
}